<template>
  <div>
    <h1>查询业主信息</h1>
    <el-row :gutter="20">
      <el-col :span="7" :offset="1">
        <el-date-picker
            style="width: 170px"
            v-model="startTime"
            type="date"
            :picker-options="startTimePickerOptions"
            placeholder="起始日期">
        </el-date-picker> -
        <el-date-picker
            style="width: 170px"
            v-model="endTime"
            type="date"
            :picker-options="endTimePickerOptions"
            placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-input v-model="searchCondition.name" placeholder="请输入姓名"></el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="searchCondition.buildingId" clearable placeholder="请选择楼栋" @change="selectUnitByBuilding()">
          <el-option
              v-for="allBuildings in allBuildings"
              :key="allBuildings.id"
              :label="allBuildings.buildingName"
              :value="allBuildings.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="searchCondition.unitId" clearable placeholder="请选择单元号" @change="selectHouseByUnit()">
          <el-option
              v-for="allUnits in allUnits"
              :key="allUnits.id"
              :label="allUnits.unitName"
              :value="allUnits.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="searchCondition.houseId" clearable placeholder="请选择门牌号">
          <el-option
              v-for="allHouse in allHouse"
              :key="allHouse.id"
              :label="allHouse.houseNumber"
              :value="allHouse.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button @click="handleSearch()" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="21" :offset="1">
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255c, 0.9)"
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="业主编号"
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="80">
          </el-table-column>
          <el-table-column
              prop="phone1"
              label="手机号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="card"
              label="身份证号"
              width="300">
          </el-table-column>
          <el-table-column
              prop="building.buildingName"
              label="楼栋"
              width="80">
          </el-table-column>
          <el-table-column
              prop="unit.unitName"
              label="单元"
              width="80">
          </el-table-column>
          <el-table-column
              prop="house.houseNumber"
              label="门号"
              width="80">
          </el-table-column>
          <el-table-column
              prop="buyTime"
              label="购房时间"
              width="120">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="140">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:true,
      tableData: [{
        id: null,
        name: null,
        card: null,
        phone1: null,
        buyTime: null,
        staffId: null,
        liveing: null,
        unitId: null,
        houseId: null,
        buildingId: null,
      }],
      startTime:null,
      endTime:null,
      pageSize:null,
      pageNum:null,
      total:null,

      allBuildings:[],
      allUnits:[],
      allHouse:[],

      searchCondition:{
        name:null,
        buildingId:null,
        unitId:null,
        houseId:null,
      },




      startTimePickerOptions:{
        disabledDate:(date)=>{
          if(this.endTime)
          {
            return date>this.endTime;
          }
          else{
            return false;
          }
        }
      },
      endTimePickerOptions:{
        //下面这种写法里面不能使用this
        disabledDate:(date)=>{
          return date<this.startTime;
        }
      },

    }
  },
  created() {
    this.handleSearch();
    this.selectAllBuilding();
  },
  methods:{
    selectAllOwner(){
      this.$axios.get("manage/selectAllOwner",{params: {pageNum:"1",pageSize:"5"}})
          .then(response => {
            console.log(response);
            this.total = response.data.data.total;
            this.pageSize = response.data.data.size;
            this.tableData = response.data.data.records;
            this.loading=false;
          })
    },
    selectAllBuilding() {
      this.$axios.get("manage/findbuilding")
          .then(response =>{
            console.log(response);
            this.allBuildings = response.data.buildingList;
            console.log(this.allBuildings);
          })
    },
    selectUnitByBuilding(){
      this.searchCondition.unitId = null;
      this.allUnits = [];
      this.searchCondition.houseId = null;
      this.allHouse = [];
      this.$axios.get("manage/unit/selectUnitById",{params:{id:this.searchCondition.buildingId}})
          .then(response =>{
            console.log(response);
            this.allUnits = response.data.data;
          })
    },
    selectHouseByUnit(){
      this.searchCondition.houseId = null;
      this.allHouse = [];
      this.$axios.get("manage/selectHouseByUnit",{params:{unitId:this.searchCondition.unitId}})
          .then(response =>{
            console.log(response);
            this.allHouse = response.data.data;
          })
    },
    handleClick:function (id) {
      this.$router.push({name:"业主详情及修改",query:{id:id}});
    },
    handleCurrentChange(val){

      this.pageNum = val;
      this.handleSearch();

      // this.$axios.get("manage/selectAllOwner",{params: {pageNum:val,pageSize:this.pageSize}})
      //     .then(response=>{
      //       this.tableData =  response.data.data.records;
      //       this.loading=false;
      //     })
    },
    handleSearch(){
      this.loading=true;
      this.$axios.post("manage/findOwnerByCondition",this.searchCondition,{params:{pageNum:this.pageNum,startTime:this.startTime,endTime:this.endTime}})
          .then(response=>{
            console.log(response);
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
            this.pageSize = response.data.data.pageSize;
            console.log(this.tableData);
            this.loading=false;
          });

    },
  }
}
</script>
